<template>
  <div class="group2">
    <!-- !渲染父组件传递过来的请求数据slist -->
    <div class="grid-box">
      <template v-for="item in props.slist" :key="item">
        <slot name="gridbox" :item></slot>
      </template>
    </div>
    <hr>

    <!-- !渲染父组件传递过来的foot响应式变量 -->
    <p>这是{{ props.foot }}</p>
    <hr>

    <!-- !传值给孙组件 -->
    <demo41 :foot2="props.foot"></demo41>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import { type IDdemo } from '@/service/types/demo4Types';
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';
import { watchEffect } from 'vue';
import demo41 from './demo41.vue';
//接收的父组件传值过来的slist 和 foot
const props = defineProps<{
  slist: IDdemo[];
  foot: string;
}>();

watchEffect(() => {
  console.log(props.slist)
})
</script>

<style lang='scss'>
.group2 {
  border: 2px solid rgb(111, 203, 50);
  margin: 10px;
  padding: 10px;
}

/* #region  网格布局 */

.grid-box {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.grid-box-item {
  border-radius: 5px;
  cursor: pointer;
}
</style>
